<template>
    <div id="application">
        <div class="appBack">
            <div class="titleG"><div id="title1">填写作品信息</div><div id="mid"></div><div id="title2">上传参赛作品</div></div>
            <div class="step1" v-show="step==1">
                <el-form class="form" ref="ruleFormRef" :rules="rules" :model="ruleForm">
                    <el-form-item label="作品名称：" prop="title" required>
                        <el-input v-model="ruleForm.title" autocomplete="off" placeholder="请输入作品名称"/>
                    </el-form-item>
                    <el-form-item label="参赛组别：" prop="classOne" required>
                        <el-radio-group v-model="ruleForm.classOne">
                            <el-radio :value="0">思政课程组</el-radio>
                            <el-radio :value="1">公共基础课程组</el-radio>
                            <el-radio :value="2">专业技能课程⼀组</el-radio>
                            <el-radio :value="3">专业技能课程⼆</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="参赛学校：" prop="school" required>
                        <el-input v-model="ruleForm.school" autocomplete="off" placeholder="请输入参赛学校"/>
                    </el-form-item>
                    <el-form-item label="参赛团队：" prop="teacher" required>
                        <el-input type="textarea" v-model="ruleForm.teacher" autocomplete="off" placeholder="请输入参赛团队"/>
                    </el-form-item>
                    <el-form-item label="参赛报名表：" required><PDFUpload ref="baomingbiao" keyword="baomingbiao" /></el-form-item>
                    <el-form-item label="信息公示件：" required><PDFUpload ref="xinxigongshi" keyword="xinxigongshi" /></el-form-item>
                    <el-form-item label="联系方式：" prop="mobile" required>
                        <el-input  v-model="ruleForm.mobile" autocomplete="off" placeholder="请输入联系方式"/>
                    </el-form-item>
                    <el-form-item><el-button type="primary" style="margin-left: 48%;" @click="reshStep">下一步</el-button></el-form-item>
                </el-form>
            </div>
            <div class="step2" v-show="step==2">
                <table style="border-collapse: collapse;width: 100%">
                    <tr><td></td><td>请上传MP4 格式的视频，最多可上传12个视频，且单个视频文件大小不超过 500M</td></tr>
                    <tr>
                        <td rowspan="4">课堂实录</td>
                        <td style="display: flex;">
                            <div style="min-width: 3vw;">团队一</div>
                            <VideoUpload ref="video1" keyword="video1" /><VideoUpload ref="video2" keyword="video2" />
                            <VideoUpload ref="video3" keyword="video3" />
                        </td>
                    </tr>
                    <tr>
                        <td style="display: flex;">
                            <div style="min-width: 3vw;">团队二</div>
                            <VideoUpload ref="video4" keyword="video4" /><VideoUpload ref="video5" keyword="video5" />
                            <VideoUpload ref="video6" keyword="video6" />
                        </td>
                    </tr>
                    <tr>
                        <td style="display: flex;">
                            <div style="min-width: 3vw;">团队三</div>
                            <VideoUpload ref="video7" keyword="video7" /><VideoUpload ref="video8" keyword="video8" />
                            <VideoUpload ref="video9" keyword="video9" />
                        </td>
                    </tr>
                    <tr>
                        <td style="display: flex;">
                            <div style="min-width: 3vw;">团队四</div>
                            <VideoUpload ref="video10" keyword="video10" /><VideoUpload ref="video11" keyword="video11" />
                            <VideoUpload ref="video12" keyword="video12" />
                        </td>
                    </tr>
                    <tr><td>教案</td><td><PDFUpload ref="jiaoan" text="请上传100M以内的pdf文件" keyword="jiaoan" /></td></tr>
                    <tr><td>教学实施报告</td><td><PDFUpload ref="baogao" text="请上传100M以内的pdf文件" keyword="baogao" /></td></tr>
                    <tr><td>专业人才培养方案</td><td><PDFUpload ref="fangan" text="请上传100M以内的pdf文件" keyword="fangan" /></td></tr>
                    <tr><td>课程标准</td><td><PDFUpload ref="biaozhun"text="请上传100M以内的pdf文件" keyword="biaozhun" /></td></tr>
                    <tr><td>教材选用说明</td><td><PDFUpload ref="shuoming" text="请上传100M以内的pdf文件" keyword="shuoming" /></td></tr>
                </table>
                <br/>
                <div style="width: 100%;display: flex;justify-content: center;align-items: center;">
                    <el-button type="primary" @click="reshStep">上一步</el-button>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue';
import {useGlobStore} from '@/stores/useGlobStore'
import {ElMessage,  ElLoading} from 'element-plus';
import type { FormInstance, FormRules} from 'element-plus'
import {useRouter } from 'vue-router'
import VideoUpload from '@/components/VideoUpload.vue'
import PDFUpload from '@/components/PDFUpload.vue'
import {addApplication} from '@/api/application'

const store = useGlobStore();
const router = useRouter();
const step = ref(1);
const baomingbiao = ref();
const xinxigongshi = ref();
const video1 = ref();
const video2 = ref();
const video3 = ref();
const video4 = ref();
const video5 = ref();
const video6 = ref();
const video7 = ref();
const video8 = ref();
const video9 = ref();
const video10 = ref();
const video11 = ref();
const video12 = ref();
const jiaoan = ref();
const baogao = ref();
const fangan = ref();
const biaozhun = ref();
const shuoming = ref();
const ruleFormRef = ref()
const ruleForm = ref({
    title: "", //'标题', 
    subTitle: "", // '⼦标题'
    classOne: 0, //'⼀级分类 0:思政课组,1:公共基础课程组,2:专业技能课程⼀组,3:专业技能课程⼆
    school: "", //'学校名称'
    teacher: "", //'参赛教师名称'
    mobile: "", //'联系⽅式（⽼师）',
    userId: 0, //⽤户id
    dsItemSubList: [{keyWord: "",url: "",fileType: 1,subTitle: ""}],
    baomingbiao: "/profile/upload/2024/07/02/报名表⽂档_20240702160835A001.pdf",
    xinxigongshi: "/profile/upload/2024/07/02/信息公示⽂档_20240702160838A002.pdf"
})

const check = (rule: any, value: any, callback: any) => {
    if (value === '') 
    {
        callback(new Error('内容不能为空'))
    }
    else 
    {
        callback()
    }
}

const rules = ref<FormRules<typeof ruleForm>>({
    title: [{ validator: check, trigger: 'blur' }],
    school: [{ validator: check, trigger: 'blur' }],
    teacher: [{ validator: check, trigger: 'blur' }],
    mobile: [{ validator: check, trigger: 'blur' }]
})

const init = ()=>{
    if(localStorage.getItem('dsUser'))
    {

    }
    else
    {
        store.setIsLogin(true);
        router.push("/home");
    }
}

//获取视频和pdf上传对象
const getAllData = ()=>{
    ruleForm.value.userId = JSON.parse(String(localStorage.getItem('dsUser'))).userId;
    ruleForm.value.dsItemSubList[0] = video1.value.getVideoData();
    ruleForm.value.dsItemSubList[1] = video2.value.getVideoData();
    ruleForm.value.dsItemSubList[2] = video3.value.getVideoData();
    ruleForm.value.dsItemSubList[3] = video4.value.getVideoData();
    ruleForm.value.dsItemSubList[4] = video5.value.getVideoData();
    ruleForm.value.dsItemSubList[5] = video6.value.getVideoData();
    ruleForm.value.dsItemSubList[6] = video7.value.getVideoData();
    ruleForm.value.dsItemSubList[7] = video8.value.getVideoData();
    ruleForm.value.dsItemSubList[8] = video9.value.getVideoData();
    ruleForm.value.dsItemSubList[9] = video10.value.getVideoData();
    ruleForm.value.dsItemSubList[10] = video11.value.getVideoData();
    ruleForm.value.dsItemSubList[11] = video12.value.getVideoData();
    ruleForm.value.dsItemSubList[12] = jiaoan.value.getPdfData();
    ruleForm.value.dsItemSubList[13] = baogao.value.getPdfData();
    ruleForm.value.dsItemSubList[14] = fangan.value.getPdfData();
    ruleForm.value.dsItemSubList[15] = biaozhun.value.getPdfData();
    ruleForm.value.dsItemSubList[16] = shuoming.value.getPdfData();
    ruleForm.value.dsItemSubList[17] = baomingbiao.value.getPdfData();
    ruleForm.value.dsItemSubList[18] = xinxigongshi.value.getPdfData();
    ruleForm.value.dsItemSubList[19] = {keyWord: "checked2",url: '2',fileType: 2,subTitle: ""};
}

//提交表单
const submitForm = (formEl: FormInstance | undefined) => {
  getAllData();
  const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  store.setIsLogin(false);
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) 
    {
        console.log(ruleForm.value);
        let data = ruleForm.value;
        addApplication(data)
        .then((res)=>{
            console.log(res);
            if(String(res.data.code) === '200')
            {
                ElMessage({showClose: true,message: '操作成功',type: 'success'});  
                router.push("/home");     
            }
            else
            {
                ElMessage({showClose: true,message: '操作错误',type: 'error'});
                console.log(res);
            }
        }).catch((err:any)=>{console.log(err);})
    } else {
      ElMessage({
        showClose: true,
        message: '错误的提交',
        type: 'error'
      });
    }
  })
  loading.close();
}

//刷新标题样式
const reshStep = ()=>{
    if(step.value == 1){step.value = 2;}
    else{step.value = 1;}
    const title1 = document.getElementById("title1");
    const title2 = document.getElementById("title2");
    const mid = document.getElementById("mid");
    if(title1==null||title2==null||mid==null) return;
    if(step.value == 1)
    {
        title1.style.color = "#ffffff";
        title2.style.color = "black";
        title1.style.backgroundColor = "#198afc";
        mid.style.borderBottom = "1.8vw solid #efefef";
        mid.style.borderTop = "1.8vw solid #efefef";
        mid.style.borderLeft = "1.8vw solid #198afc";
        title2.style.background = "#efefef";
    }
    else
    {
        title1.style.color = "black";
        title2.style.color = "#ffffff";
        title1.style.backgroundColor = "#efefef";
        mid.style.borderBottom = "1.8vw solid #198afc";
        mid.style.borderTop = "1.8vw solid #198afc";
        mid.style.borderLeft = "1.8vw solid #efefef";
        title2.style.background = "#198afc";
    }
}

onMounted(()=>{
    init();
})
</script>

<style scoped>
#application
{
    margin: 0;
    width: 100%;
    height: auto;
    background-color: #efefef;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow:auto;
}
.appBack
{
    width: 100%;
    background-color: #ffffff;
    margin-left: 6vw;
    margin-right: 6vw;
    margin-top: 2vw;
    margin-bottom: 2vw;
    padding: 3vw;
    overflow:auto;
    border-radius: 1vw;
}
#mid
{
    width: 1.8vw;
    height: 0;
    border-top: 1.8vw solid #efefef;
    border-bottom: 1.8vw solid #efefef;
    border-left: 1.8vw solid #198afc;
}
#title1,#title2
{
    display: flex;
    justify-content: center;
    align-items: center;
}
#title1
{
    width: 49%;
    height: 3.6vw;
    background-color: #198afc;
    color: #ffffff;
}
#title2
{
    width: 49%;
    height: 3.6vw;
    background-color: #efefef;
    color: black;
}
.titleG
{
    width: 100%;
    height: 3.6vw;
    display: flex;
    font-size: 1.2vw;
    font-weight: 600;
    justify-content: space-between;
    align-items: center;
}
.step1
{
    width: 100%;
    height: auto;
    margin-top: 2vw;
    display: flex;
    justify-content: center;
    align-items: center;
}
.step2
{
    margin-top: 2vw;
}
.form
{
    width: 60%;
}
td
{
    min-width: 5vw;
    padding: 1vw;
    border: 1px solid gainsboro;
}
</style>